<script setup lang="ts">
import forumPublisher from '../../components/forum-publisher.vue'
import CustomTabBar from '@/components/custom-tabbar.vue'

import { ref } from 'vue'


const serviceList = ref([
  { id: 1, image: '/static/module/express-delivery.png', text: '快递代拿', bgColor: '#dfe7fd', rightbgColor: '#becbf4', url: '/pages-sub/service-module/express-delivery', isTab: false },
  { id: 2, image: '/static/module/maintenance.png', text: '上门维修', bgColor: '#ecf0ff', rightbgColor: '#becbf4', url: '/pages-sub/service-module/offline-repair', isTab: false },
  { id: 3, image: '/static/module/questionnaire.png', text: '学习咨询', bgColor: '#ffe9fe', rightbgColor: '#f8c6f9', url: '/pages/consultation/index', isTab: true },
])

// 使用 reactive 定义响应式对象
const contentText = ref({
  contentdown: '查看更多',
  contentrefresh: '加载中...',
  contentnomore: '没有更多'
});

// 跳转到搜索页面
const goToSearch = () => {
  uni.navigateTo({
    url: '/pages-sub/search/search'
  })
}

// 动态跳转
const handServiceHump = (url: string, isTab: boolean) => {
  console.log('nidfada', url)
  if (url) {
    if (isTab) {
      uni.switchTab({ url })
    } else {
      uni.navigateTo({ url })
    }
  }
}
</script>

<template>
  <view class="home">
    <!-- 搜索框 -->
    <view class="home-input" @click="goToSearch">
      <!-- 图标 -->
      <uni-icons custom-prefix="iconfont" color="#979fba" type="icon-sousuo" size="25"></uni-icons>
      <!-- input -->
      <input type="text" placeholder="请输入搜索内容" class="home-input-text" disabled />
    </view>
    <!-- 轮播图 -->
    <view>
      <swiper circular autoplay class="home-swiper" interval="3000" duration="500" indicator-dots="true"
        indicator-color="#fff" indicator-active-color="#3a83ff">
        <swiper-item v-for="item in 3" :key="item">
          <view class="home-swiper-item uni-bg-red">
            <image class="home-swiper-item-image" src="/static/swiper.png" mode="scaleToFill" />
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 快递快拿 上门维修 学习咨询 -->
    <view class="home-module">
      <view class="home-module-text" v-for="item in serviceList" :key="item.id"
        @click="handServiceHump(item.url, item.isTab)" :style="{ backgroundColor: item.bgColor }">
        <image class="home-module-text-image" :src="item.image" mode="scaleToFill" />
        <view class="home-module-content">
          <text class="home-module-content-text">{{ item.text }}</text>
          <!-- 图标 -->
          <image class="home-module-content-icon" :style="{ backgroundColor: item.rightbgColor }"
            src="/static/module/right.png" mode="scaleToFill" />
        </view>
      </view>
    </view>
    <!-- 校园广场 -->
    <view class="home-forum">
      <h2>校园广场</h2>
      <forumPublisher />
      <!-- 加载中 -->
      <uni-load-more status="more" :content-text="contentText" />
    </view>
    <!-- 自定义 TabBar -->
    <CustomTabBar />
  </view>
</template>


<style lang="scss" scoped>
.home {
  &-input {
    display: flex;
    align-items: center;
    border-radius: $uni-border-radius;
    padding: 15rpx;
    background-color: #ffffff;

    &-text {
      margin-left: 10px;
    }
  }

  &-swiper {
    height: 410rpx;
    /* 设置轮播图高度 */
    border-radius: $uni-border-radius;
    /* 外层容器设置圆角 */
    overflow: hidden;
    /* 关键：裁剪溢出部分 */
    margin-top: $uni-margin-top;


    &-item {
      width: 100%;
      height: 500rpx;

      &-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  &-module {
    margin-top: $uni-margin-top;
    width: 100%;
    display: flex;

    &-text {
      width: 32%;
      padding: 15rpx 10rpx;
      margin: 5rpx;
      background-color: #dfe7fd;
      border-radius: $uni-border-radius;

      &-image {
        width: 95rpx;
        height: 95rpx;
      }
    }

    &-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-text {
        font-size: 30rpx;
        color: #8a8a8a;
      }

      &-icon {
        width: 45rpx;
        height: 45rpx;
        background-color: #becbf4;
        border-radius: 100%;
      }
    }
  }

  &-forum {
    margin-top: $uni-margin-top;
  }
}
</style>